<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>g-table 测试实例</title>
<script src="../node_modules/vue/dist/vue.global.prod.js"></script>
<link rel="stylesheet" href="../node_modules/element-plus/dist/index.css">
<script src="../node_modules/element-plus/dist/index.full.min.js"></script>
<script src="../node_modules/axios/dist/axios.min.js"></script>
<!-- <script src="../dist/g-table.umd.js"></script> -->
<script src="../dist/g-table-columns-editor.umd.js"></script>
<link rel="stylesheet" href="../dist/g-table.css" />
</head>
<body>
<div id="app">
<!--   <g-table
    :key="useColumnKey ? 'tableA' : 'tableB'"
    ref="gtable1"
    :table-options="tableOptions"
    :table-columns="tableColumns"
    :table-data="tableData"
  /> -->

  <el-divider content-position="left">表格列设置</el-divider>

  <g-table-columns-editor 
    :key="useColumnKey ? 'editorA' : 'editorB'"
    ref="gtablecolumns"
    v-model:table-columns="tableColumns"
    v-model:table-data="tableData"
  />
</div>

<script>
const { ref, reactive, onMounted, nextTick,createApp } = Vue;
//import { ref, reactive } from 'Vue'
const { ElMessage } = ElementPlus;

const app = createApp({
  setup() {
    const useColumnKey = ref(true); // 控制 key 切换
    const gtable1 = ref(null);
    const gtablecolumns = ref(null);

    const tableOptions = reactive({
      dataApi: '',
      rowKey: 'name',
      pagination: true,
      showSummary: true,
      summaryColumns: ['salary'],
      selectionType: 'multiple',
      selectedRowKeys: ['用户1', '用户3'],
      options: {
        border: true,
        stripe: true
      },
      treeProps: {
        children: 'children',
        hasChildren: 'hasChildren',
        checkStrictly: false
      },
      tableLayout: 'fixed',
      showDefaultAdd: true,
      showAdvancedSearch: true,
      showRefresh: true,
      showColumns: true,
      showExport: true,
      showImport: true
    });

    const tableColumns = ref([
      {
        columnId: 0,
        prop: 'name',
        label: '姓名',
        searchable: true,
        fieldOptions: { type: 'text' },
        visible: true,
        resizable: true
      },
      {
        columnId: 1,
        prop: 'gender',
        label: '性别',
        searchable: true,
        fieldOptions: { type: 'select', options: [{ label: '男', value: '1' }, { label: '女', value: '2' }] },
        visible: false,
        resizable: true
      },
      {
        columnId: 2,
        prop: 'birthday',
        label: '生日',
        searchable: true,
        fieldOptions: { type: 'date', format: 'YYYY-MM-DD' },
        visible: true,
        resizable: true,
        formatterFn: function(cellValue) {
          if (cellValue) {
            const [year, month, day] = cellValue.split('-');
            return `${year}年${month}月${day}日`;
          } else {
            return cellValue;
          }
        }
      },
      {
        columnId: 3,
        prop: 'age',
        label: '年龄',
        searchable: true,
        fieldOptions: { type: 'number' },
        visible: false,
        resizable: true
      },
      {
        columnId: 4,
        prop: 'salary',
        label: '工资',
        searchable: true,
        fieldOptions: { type: 'number' },
        visible: true,
        resizable: true
      },
      {
        columnId: 5,
        prop: 'action',
        type: 'action',
        label: '操作',
        slot: 'action',
        width: 180,
        visible: true,
        resizable: true
      }
    ]);

    const tableData = ref([
      { name: '用户1', gender: '1', birthday: '1990-01-01', age: 25, salary: 5000 },
      { name: '用户2', gender: '2', birthday: '1992-05-15', age: 23, salary: 6000 },
      { name: '用户3', gender: '1', birthday: '1988-11-10', age: 37, salary: 7500 },
      { name: '用户4', gender: '2', birthday: '1995-03-22', age: 30, salary: 7000 }
    ]);

    function handleAdd() {
      ElMessage.success('新增');
    }

    function handleEdit(row) {
      ElMessage.info('编辑：' + row.name);
    }

    function handleDelete(row) {
      ElMessage.error('删除：' + row.name);
    }

    function handleCopy(row) {
      ElMessage.warning('复制：' + row.name);
    }

    function getSelectRows() {
      // console.log(gtable1.value.getSelectionRows());
    }

    onMounted(() => {
      // 可选的挂载后逻辑
    });

    return {
      useColumnKey,
      gtable1,
      tableOptions,
      tableColumns,
      tableData,
      handleAdd,
      handleEdit,
      handleDelete,
      handleCopy,
      getSelectRows
    };
  }
});

app.use(ElementPlus)
   //.use(GTable)
   .use(GTableColumnsEditor)
   .mount('#app');
</script>
</body>
</html>